<!doctype html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- css 引入 start -->
    <link rel="stylesheet" href="css/weui.css">
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1322770_ac094tc5jq4.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <!--    css 引入 end-->
    <title>dsapp</title>
</head>

<body>
<div id="app" class="showNav">
    <!--        搜索框 + 用户 -->
    <div class="search-bar-wrap flex flex-between">
        <!--        用户名-->
        <div class="user flex flex-between">
            <div class="user-img">
                <img src="images/user.jpg" alt="">
            </div>
            <div class="username flex flex-h-middle">
                <div class="name">郭大大</div>
                <div class="level">普通用户</div>
            </div>
        </div>
        <div class="weui-search-bar" id="searchBar">
            <form class="weui-search-bar__form">
                <div class="weui-search-bar__box">
                    <i class="weui-icon-search"></i>
                    <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索"
                           required="" @focus="search_focus">
                </div>
            </form>
            <span class="weui-search-bar__cancel-btn" id="searchCancel" @click="cancal_search_bar_focus"
                  v-show="search_bar_focus">取消</span>
        </div>
    </div>

    <div id="loadingToast" v-if="!dataEnd">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content">数据加载中</p>
        </div>
    </div>
    <!--内容-->
    <div class="views" v-show="!search_bar_focus" v-if="dataEnd">

        <!--        轮播图-->
        <div class="bannerview">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item, index) in banner_list" :key="index"
                         style="height: 100%;">
                        <div class="banner-content"><img :src="item.src" :alt="item.alt"></div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <!--        导航栏-->
        <div class="homenav">
            <div class="flex flex-mid">
                <div class="nav-item" v-for="(item, index) in nav_list" :key="index">
                    <div class="img-box">
                        <a :href="item.href"><img :src="item.src" alt=""></a>
                    </div>
                    <p class="nav-title">{{item.title}}</p>
                </div>
            </div>
        </div>
        <!--        会员卡-->
        <div class="member-card flex flex-between">
            <img src=""
                 alt="">
            <div class="card-box-right flex flex-between">
                <div class="prefecture-info"><h5 class="title overflow">会员卡专区</h5>
                    <p class="desc overflow">一键享受更多优惠</p></div>
                <div class="btn btn-text">
                    立即开通
                </div>
            </div>
        </div>
        <!--        免费体验-->
        <section class="mod">
            <div class="flex flex-between padding20">
                <h1 class="section-hd">{{free_experience.name}} <span
                        class="small-font">{{free_experience.smallname}}</span></h1>
                <span class="small-font">更多></span>
            </div>
            <div class="flex-mid flex-wrap">
                <div v-for="(item, index) in free_experience.items" class="m-item">
                    <div class="img-item rel">
                        <img :src="item.src" alt="">
                        <p class="free-box abs">免费</p>
                    </div>
                    <p class="m2">{{item.content}}</p>
                </div>
            </div>

        </section>
        <!-- 猜你喜欢-->
        <section class="mod">
            <div class="flex flex-between padding20">
                <h1 class="section-hd">{{guess_like.name}}</h1>
                <span class="small-font">更多</span>
            </div>
            <div class="flex-mid flex-wrap">
                <div v-for="(item, index) in guess_like.items" class="m-item">
                    <div class="img-item rel">
                        <img :src="item.src" alt="">
                    </div>
                    <p class="m1 f1">{{item.title}}</p>
                    <p class="m2 f2">{{item.content}}</p>
                    <div class="flex flex-mid mod">
                        <p class="price f08">￥{{item.price}}</p>
                        <p class="nums f08">
                            <i class="iconfont icon-02"></i>
                            {{item.people_see}}人观看
                        </p>
                    </div>
                </div>
            </div>
        </section>
        <section class="mod"></section>
    </div>

    <!--页尾 tab -->
    <div class="weui-tabbar vw-tab-nav flex-wrap" v-if="!search_bar_focus">
        <div class="weui-tabbar__item " :class="tab_now ==='首页' ? 'weui-bar__item_on' : ''">
                <span style="display: inline-block;position: relative;">
                    <i class="iconfont icon-shouye weui-tabbar__icon"></i>
                    <span class="weui-badge" style="position: absolute;top: -2px;right: -13px;display: none;">8</span>
                </span>
            <p class="weui-tabbar__label">首页</p>
        </div>
        <div class="weui-tabbar__item " :class="tab_now ===2 ? 'weui-bar__item_on' : ''">
                <span style="display: inline-block;position: relative;">
                    <i class="iconfont icon-xuexi- weui-tabbar__icon"></i>
                    <span class="weui-badge" style="position: absolute;top: -2px;right: -13px;display: none;"></span>
                </span>
            <p class="weui-tabbar__label">研习社</p>
        </div>
        <div class="weui-tabbar__item " :class="tab_now ===3 ? 'weui-bar__item_on' : ''">
                <span style="display: inline-block;position: relative;">
                    <i class="iconfont icon-yigouxiangmu weui-tabbar__icon"></i>
                    <span class="weui-badge" style="position: absolute;top: -2px;right: -13px;display: none;"></span>
                </span>
            <p class="weui-tabbar__label">已购</p>
        </div>
        <div class="weui-tabbar__item " :class="tab_now ===4 ? 'weui-bar__item_on' : ''">
                <span style="display: inline-block;position: relative;">
                    <i class="iconfont icon-iconfontzhizuobiaozhun023110 weui-tabbar__icon"></i>
                    <span class="weui-badge" style="position: absolute;top: -2px;right: -13px;display: none;"></span>
                </span>
            <p class="weui-tabbar__label">消息</p>
        </div>
        <div class="weui-tabbar__item " :class="tab_now ===5 ? 'weui-bar__item_on' : ''">
                <span style="display: inline-block;position: relative;">
                    <i class="iconfont icon-wode weui-tabbar__icon"></i>
                    <span class="weui-badge" style="position: absolute;top: -2px;right: -13px;display: none;"></span>
                </span>
            <p class="weui-tabbar__label">我的</p>
        </div>
    </div>

</div>

<!-- js 引入 start -->
<script src="js/fetch.js"></script>
<script src="js/api.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/app.js"></script>
<!-- js 引入 end-->
</body>

</html>